<template>
  <div>
    <span>用户名:</span>
    <input type="text" placeholder="用户名" v-model="username" />
    <br />
    <span>密&#12288;码:</span>
    <input type="password" placeholder="密码" v-model="password" />
    <br />
    <span>球&#12288;队:</span>
    <!-- v-model 写在select 上, 绑定的信息option的value -->
    <select v-model="team">
      <option value="LY">老鹰</option>
      <option value="TY">太阳</option>
      <option value="KC">快船</option>
    </select>
    <br />
    <span>序列号:</span>
    <input type="radio" value="one" v-model="num" />1
    <input type="radio" value="two" v-model="num" />2
    <input type="radio" value="three" v-model="num" />3
    <br />
    <span>是否同意用户协议&#12288;</span>
    <!-- 复选框:
         1. 当vue的数据变量是布尔值时候,此时v-model关联是复选框的checked属性
         2. 当vue的数据变量是数组时候, 此时v-model关联是复选框的value属性, 必须手动选
     -->
    <input type="checkbox" name="" id="" v-model="isAgree" />
    <br />
    <span>个人爱好:&#12288;</span>
    <input type="checkbox" value="studyeating" v-model="hobby" />studyeating
    <input type="checkbox" value="runing" v-model="hobby" />runing
    <input type="checkbox" value="eating" v-model="hobby" />eating
    <br />
    <p>个人简介:</p>
    <textarea name="" id="" cols="30" rows="10" v-model="info"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      team: "",
      num: "",
      isAgree: false,
      hobby: [],
      info:''
    };
  },
};
</script>

<style>
</style>